<template>
    <div v-loading="loading">
        <el-card class="card2" :body-style="{ padding: '0px' }">
            <el-input v-model="keyword" placeholder="Please input admin name" class="w-50 m-2" />
        </el-card>
        <el-card class="box-card" v-loading="loading">
            <div class="box-card-header">
                <el-button type="primary" @click="addHandler">新增</el-button>
                <el-tooltip effect="dark" content="刷新" placement="bottom">
                    <el-icon class="box-item" @click="refreshHandler">
                        <Refresh />
                    </el-icon>
                </el-tooltip>
            </div>
            <el-table :data="adminList" stripe style="width: 100%" empty="暂无数据">
                <el-table-column prop="title" label="头像" width="100">
                    <template #default="{ row }">
                        <div class="demo-type">
                            <el-avatar :size="60" :src="row.avatar" @error="errorHandler">
                                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
                            </el-avatar>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="管理员信息" width="300">
                    <template #default="{ row }">
                        <p>用户名:{{ row?.username || '-' }}</p>
                        <p>管理员Id:{{ row.id }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="所属管理员" width="130">
                    <template #default="{ row }">
                        <p>{{ row.role?.name || '-' }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="update_time" label="状态" width="100">
                    <template #default="{ row }">
                        <el-switch v-model="row.status" @click="updataStateHandler(row.id, row.status)"
                            :disabled="!!row.super" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="{row}">
                        <el-button link type="primary" size="small"
                            @click="updataHandler(row.id)">修改</el-button>
                        <el-popconfirm confirm-button-text="确认" cancel-button-text="不确认" title="你确定要删除这条数据?"
                            @confirm="removeHandler(row.id)">
                            <template #reference>
                                <el-button link type="primary" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            
        </el-card>
        <div class="bottom">
            <el-pagination  :current-page="page" layout="prev, pager, next" :total="total" @current-change="currentChangeHandler"/>
        </div>
        <!-- <div class="bottom">
            <el-pagination background layout="prev, pager, next" :total="total" :current-page="page"
                @current-change="getNotice" />
        </div>
       
        <drawer ref="drawerRef" :width="500" :closeButton="true" :closeOnPress="true">
            <template #top>
                <h3>新增公告</h3>
            </template>
            <template #content>
                <el-form :model="form" label-width="120px" class="form-box">
                    <el-form-item label="标题">
                        <el-input v-model="form.title" placeholder="请输入公告标题" />
                    </el-form-item>
                    <el-form-item label="内容">
                        <el-input v-model="form.content" placeholder="请输入公告内容" />
                    </el-form-item>
                </el-form>
            </template>
            <template #bottom>
                <el-button type="primary" @click="submitHandler">添加</el-button>
                <el-button type="">取消</el-button>
            </template>
        </drawer> -->
    </div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted, watch } from 'vue'
import { adminListApi, updataAdminStateApi ,removeAdminApi} from '@/api/admin'
import { ElMessage } from 'element-plus'
// loading加载开关
const loading = ref(false)
// 管理员列表
const adminList = ref()
// 页数
const total = ref(0)
// 当前页数
const page = ref(1)
// 管理员密钥
const keyword = ref('')
const lime = ref(10)
const getAdminList = () => {
    loading.value = true
    adminListApi(page.value,lime.value, keyword.value).then(res => {
        total.value = res.data.data.totalCount
        adminList.value = res.data.data.list
        loading.value = false
    })
}
// 输入框
watch(
    () => keyword.value,
    () => getAdminList()
)
// 添加管理员
const addHandler = () => {

}
// 刷新按钮
const refreshHandler = () => {
    getAdminList()
}
// 修改操作
const updataHandler = (id:number) => {
    removeAdminApi(id).then(res => {

    })
}
// 删除
const removeHandler = (id:number) => {
    removeAdminApi(id).then(res => {
        console.log(res);
        if(res.data.data){
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getAdminList()
        }
    })
}
// 修改管理员状态
const updataStateHandler = (id: number, status: number) => {
    if (status) {
        status = 1
    } else { status = 0 }
    updataAdminStateApi(id, status).then(res => {
        console.log(res);
        if (res.data.data) {
            ElMessage({
                type: 'success',
                message: '修改成功'
            })
        }

    })


}
// 分页
const currentChangeHandler = (p:any) => {
    if(typeof p === 'number') page.value = p
    getAdminList()
}
const errorHandler = () => true
onMounted(() => {
    getAdminList()

})
</script>
<style lang='scss' scoped>
.box-card {
    min-height: 500px;
    height: 500px;
    overflow: auto;
}

.card2 {
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 30px;
}

.box-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 100px;

}

.bottom {
    width: 100%;
    height: 40px;
    background-color: rgba(99, 99, 99, .4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-item {
    cursor: pointer;
}

.form-box {
    width: 100%;
    padding-top: 200px;
}
.bottom{
    width: 100%;
    position: absolute;
    display: flex;
    align-items: center;

}
</style>